<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>生命周期</h3>
      <input type="text" v-model="title" />
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            title: ''
          }
        },
        // 它在数据初始化之前执行，它可以用this，但不能得到对象中的配置数据 data/methods ...
        // 可以在此钩子函数中进行动态添加成员属性数据
        // 执行1次
        beforeCreate() {
          // 此处初始化的数据它不是响应式，它就是一个普通的成员属性
          this.msg = 'hahahahahaha'
          console.log('beforeCreate')
        },
        // 数据初始化完毕，可以在此对数据进行接口请求更新
        // 执行1次
        created() {
          console.log('created')
        },
        // 数据和模板编译生成dom完成，并准备要挂载到页面节点dom中
        // 执行1次
        beforeMount() {
          console.log('beforeMount')
        },
        // 虚拟dom已经真实的挂载到页面点的dom中，并显示在页面中
        // 可以在此获取真实的dom，如果vue中有dom操作可以在此进行
        // 执行1次
        mounted() {
          console.log('mounted', this.msg)
          setTimeout(() => {
            console.log(this)
            this.msg = 'abc'
          }, 100)
        },
        // data中的数据发生改变前就会执行它，它会执行N次
        // 在此处可以网络请求，但一定不能进行数据源的修改
        // 执行N次
        beforeUpdate() {
          console.log('beforeUpdate')
        },
        // data数据发生改变后执行
        // 执行N次
        // 此处也可以直接dom操作,执行它时，页面已经显示出来了
        updated() {
          console.log('updated')
        },
        // 页面卸载前执行,执行清理工作
        // 执行1次
        beforeUnmount() {
          console.log('beforeUnmount')
        },
        // 页面卸载后,执行清理工作
        unmounted() {
          console.log('unmounted')
        }
      })
      app.mount('#app')

      // setTimeout(() => {
      //   app.unmount()
      // }, 3000)
    </script>
  </body>
</html>
